<template>
  <div>
    <Modal
      v-model="isVisible"
      title="服务协议及隐私权政策"
      class-name="vertical-center-modal"
      width="650"
      :closable="false"
      :mask-closable="false"
    >
      <div style="padding: 15px 25px 30px 25px">
        <p>云丁为您提供的服务皆合法合规，在享受云丁的服务之前，您须点击同意以下协议，请您务必审慎阅读，并充分理解协调条款内容。</p>
        <div style="margin-top:35px;color:#0297D7;">
          <a href="https://gongyu.yunding.cn/protocol.html"target="_blank">《云丁服务协议》</a>
        </div>
        <div style="margin-top:15px;color:#0297D7;">
          <a href="https://gongyu.yunding.cn/privacy.html" target="_blank">《云丁隐私权政策》</a>
        </div>
      </div>
      <div slot="footer">
        <Button
            type="ghost"
            size="large"
            @click="loginOout">
            不同意，退出
        </Button>
        <Button
            type="ghost"
            size="large"
            @click="agree">
            同意
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script type="text/javascript">
import { http, api } from '@/libs/http'

export default {
  name: 'private-protocol-modal',
  props: {
    visible: {
      type: Boolean
    }
  },
  data () {
    return {}
  },

  computed: {
    isVisible: {
      get: function () {
        return this.visible
      },
      set: function (val) {
        this.$emit('on-close-protocol', val)
      }
    }
  },

  mounted () {

  },

  methods: {
    loginOout () {
      http.logout()
    },

    agree () {
      http.request(this, api.user_privacy_policy, null, null, (res, err) => {
        if (err || !res) {
          return
        }
        if (
          window &&
          window.localStorage &&
          window.localStorage.setItem
        ) {
          window.localStorage.setItem(
            'is_verify_privacy',
            true
          )
        }
        this.isVisible = false
      })
    }
  }
}
</script>

<style lang='less'>
</style>